<template>
<div>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="form">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible=true;notice.title='新增公告';">新增</el-button>
      <el-table :data="tableData">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="publish_at" label="发布时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-footer>

    <el-dialog :title="notice.title" :visible.sync="dialogFormVisible">
      <el-form :model="notice">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="notice.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="notice.content" autocomplete="off" type="textarea"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upNotice">确 定</el-button>
      </div>
    </el-dialog>

  </el-container>

  <el-container>
    <el-header>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="公告内容">
          <el-input v-model="form.content" placeholder="公告内容"></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker
            placeholder="发布时间"
            v-model="form.publish_at"
            style="width: 100%;"
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getNotice">查询</el-button>
        </el-form-item>s
      </el-form>
    </el-header>
    <el-main>
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogFormVisible = true;"> 新增</el-button>
      <el-table
        :data="tableData">
        <el-table-column ></el-table-column>
      </el-table>
    </el-main>

    <!--弹窗-->
    <el-dialog title="新增公告" :visible.sync="dialogFormVisible">
      <el-form :model="note">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="note.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动形式" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="note.content"></el-input>
        </el-form-item>

        <el-form-item label="发布时间" :label-width="formLabelWidth">
          <el-date-picker
            placeholder="发布时间"
            v-model="note.publish_at"
            style="width: 100%;"
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetime"
          >
            >
          </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createNotice">确 定</el-button>
      </div>
    </el-dialog>

  </el-container>
</div>
</template>

<script>



import {getNoticeList,addNotice,delNotice,editNotice} from "../../apilist/Admin";

export default {
        name: "noticeList",
      data(){
          return {
            form: {
              title:'',
              page: 1,
              limit: 10,
            },
            total:0,
            tableData: [{id: 1,title: 'test',publish_at: '2023-09-01'}],
            dialogFormVisible: false,
            notice: {title: '',content: '',id: 0},
            formLabelWidth: '80px',
            isNew: true,
          }
      },
      methods: {
          getList(){
            getNoticeList(this.form).then(res => {
              this.tableData = res.data.list;
              this.total = res.data.total;
            });
          },
        handleSizeChange(size){
            this.form.limit = size;
            this.getList();
        },
        handleCurrentChange(page){
            this.form.page = page;
            this.getList();
        },

        edit(row){
            this.notice.id = row.id;
            this.notice.title = row.title;
            this.notice.content = row.content;
            this.dialogFormVisible = true;
            this.isNew = false;
        },

        del(row){
          this.$confirm('此操作将永久删除该备注, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delNotice(row).then(res => {
              if(res.state === 'ok'){
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                  onClose:()=>{
                    this.getList();
                  }
                });
              }
            });
          }).catch(() => {

          });
        },
        upNotice(){
          if(this.isNew){
            addNotice(this.notice).then(res => {
               if(res.state === 'ok'){
                 this.$message({
                   message: '添加成功',
                   type:'success',
                   onClose:()=>{
                     this.dialogFormVisible = false;
                     this.isNew = true;
                     this.getList();
                   }
                 });
               }
            });
          }else{
            editNotice(this.notice).then(
              res => {
                if(res.state === 'ok'){
                  this.$message({
                    message: '编辑成功',
                    type:'success',
                    onClose:()=>{
                      this.isNew = true;
                      this.dialogFormVisible = false;
                      this.getList();
                    }
                  });
                }
              }
            );
          }
        },
      },
      mounted() {
          this.getList();
      }
}
</script>

<style scoped>

</style>
